<template>
  <div class="avue-contail" :class="{'avue--collapse': isCollapse}">
    <div class="avue-layout" :class="{'avue-layout--horizontal':isHorizontal}">
      <div class="avue-sidebar" v-show="validSidebar">
        <!-- 左侧导航栏 -->
        <logo/>
        <sidebar/>
      </div>
      <div class="avue-main">
        <!-- 顶部导航栏 -->
        <top ref="topRef"/>
        <!-- 顶部标签卡 -->
        <tags/>
        <search class="avue-view" v-show="isSearch"></search>
        <!-- 主体视图层 -->
        <div id="avue-view" v-show="!isSearch" v-if="isRefresh">
          <router-view v-slot:default="{ Component }">
            <keep-alive :include="tagsKeep">
              <component :is="Component"/>
            </keep-alive>
          </router-view>
        </div>
        <!--        <el-footer class="avue-footer">-->
        <!--          <img src="/src/assets/img/logo.png" alt="" class="logo">-->
        <!--          <p class="copyright">© Powered by SZ</p>-->
        <!--        </el-footer>-->
      </div>
    </div>
  </div>
</template>

<script setup>
import {useUserStore} from "../../store/modules/user.js";
import {useCommonStore} from "../../store/modules/common.js";
import {useNavsStore} from "../../store/modules/tags.js";
import tags from "./tags.vue";
import search from "./search.vue";
import logo from "./logo.vue";
import top from "./top/index.vue";
import sidebar from "./sidebar/index.vue";
import {getCurrentInstance, computed} from "vue"
import {useRoute, useRouter} from "vue-router"
import {useIndexHook} from "/src/hooks/useIndexHook.js";
import {indexKey, indexOpenMenuKey} from "/src/page/index/indexSymbol.js";
import {validatenull} from "/src/utils/validate.js";

defineOptions({
  name: "index",
})

const indexHook = useIndexHook()

// cxt.appContext.config.globalProperties.$bus

const cxt = getCurrentInstance() //相当于Vue2中的this
console.log("cxt", cxt)
console.log("cxt context", cxt.appContext)
provide(indexKey, cxt.appContext)


const isHorizontal = computed(() => {
  const commonStore = useCommonStore();
  return commonStore.setting.sidebar === 'horizontal'
})
const isRefresh = computed(() => {
  const commonStore = useCommonStore();
  return commonStore.isRefresh
})
const isLock = computed(() => {
  const commonStore = useCommonStore();
  return commonStore.isLock
})
const isCollapse = computed(() => {
  const commonStore = useCommonStore();
  return commonStore.isCollapse
})
const isSearch = computed(() => {
  const commonStore = useCommonStore();
  return commonStore.isSearch
})
const setting = computed(() => {
  const commonStore = useCommonStore();
  return commonStore.setting
})
const menu = computed(() => {
  const userStore = useUserStore();
  return userStore.menu
})
const tagsKeep = computed(() => {
  // todo 下面的ele.value原来是ele.fullpath
  const navsStore = useNavsStore()
  return navsStore.tagList.filter(ele => {
    return (ele.meta || {}).keepAlive
  }).map(ele => ele.value)
})


onMounted(() => {
  const userStore = useUserStore()
  userStore.GetAuthMenu().then(data => {
    console.log("datadata", data)
    console.log("datadata", data.length !== 0)
    if (data.length !== 0) {
      router.$avueRouter.formatRoutes(data, true);
    }
  })
})

const route = useRoute();
const validSidebar = computed(() => {
  return !((route.meta || {}).menu == false || (route.query || {}).menu == 'false')
})

const router = useRouter();
//打开菜单
const openMenu = (item = {}) => {

  const t1=window.performance.now()
  console.log("openMenu", item, t1)
  //当点击顶部菜单做的事件
  if (!validatenull(item)) {
    let itemActive = {};
    let childItemActive = 0;
    //vue-router路由
    if (item.path) {
      itemActive = item;
    } else {
      if (menu.value[childItemActive].length == 0) {
        itemActive = menu.value[childItemActive];
      } else {
        itemActive = menu.value[childItemActive].children[childItemActive];
      }
    }
    const userStore = useUserStore()
    userStore.SET_MENU_ID(item);
    router.push({
      path: itemActive.path
    });
  }
  const t2=window.performance.now()
  console.log("openMenu", item, t2)
  console.log(openMenu, t2-t1);//6.199999999254942
}
provide(indexOpenMenuKey, openMenu)
defineExpose({
  openMenu
})
</script>